<template>
  <div>
    <div id="myChart" style="width: 800px;height: 500px;"></div>
  </div>
</template>

<script>
  export default {
    name: "echart1",
    mounted() {
      this.drawPie()
    },
    methods: {
      drawPie(){
        let _this = this;
        // 基于准备好的dom，初始化echarts实例
        _this.myChart = _this.$echarts5.init(document.getElementById('myChart'));
        // let bgColor = '#fff';
        let title = '总量';
        let Nm = 'Nm³'
        let color = ['#ea9251', '#5b5bff', '#7d25c1', '#1fd389', '#1092e8', '#17bffc'];
        let echartData = [
          {
          name: '天然气',
          value1: 16,
          value: "3720"
        },
          {
            name: '原油',
            value1: 15,
            value: "2920"
          },
          {
            name: '柴油',
            value1: 18,
            value: "2200"
          },
          {
            name: '电力',
            value1: 26,
            value: "1420"
          },
          {
            name: '外购电',
            value1: 10,
            value: "2200"
          },
          {
            name: '煤层气(消耗)',
            value1: 26,
            value: "1420"
          }
        ];

        let formatNumber = function(num) {
          let reg = /(?=(\B)(\d{3})+$)/g;
          return num.toString().replace(reg, ',');
        }
        let total = echartData.reduce((a, b) => {
          return a + b.value * 1
        }, 0);
        _this.myChart.setOption(
          {
            backgroundColor: 'rgba(14,47,64)',
            color: color,
            // tooltip: {
            //     trigger: 'item'
            // },
            title: [{
              text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}\n{suffix|'+Nm+'}',
              top: 'center',
              left: 'center',
              textStyle: {
                rich: {
                  name: {
                    fontSize: 12,
                    fontWeight: 'normal',
                    color: '#00fcff',
                    padding: [10, 0]
                  },
                  val: {
                    fontSize: 32,
                    fontWeight: 'bold',
                    color: '#fefefe',
                  },
                  suffix:{
                    fontSize: 12,
                    fontWeight: 'bold',
                    color: '#00fcff',
                  }
                }
              }
            }],
            legend: {
                orient: 'vertical',
                icon: 'rect',
                x: '10%',
                y: 'center',
                itemWidth: 12,
                itemHeight: 12,
                align: 'left',
                textStyle: {
                  color: '#c5efff',
                    rich: {
                        name: {
                            fontSize: 12,
                            color: '#fff'
                        },
                        value: {
                            fontSize: 16,
                            padding: [0, 5, 0, 15],
                          color: '#fff'
                        },
                        unit: {
                            fontSize: 12,
                          color: '#fff'
                        }
                    }
                },
                // formatter: function(name) {
                //     let res = echartData.filter(v => v.name === name);
                //     res = res[0] || {};
                //     let unit = res.unit || '';
                //     return '{name|' + name + '}  {value|' + res.value + '}{unit|' + unit + '}'
                // },
                // data: legendName
            },
            graphic: [
              {
                z:4,
                type: 'image',
                id: 'logo',
                left: 'center',
                top: 'center',
                style: {
                  image: '',
                  // width: 129,
                  // height: 65,
                  opacity: 1,
                  width: 150,
                  height: 150
                }
              }
              ],
            series: [
              {
                type: 'pie',
                radius: ['40%', '60%'],
                center: ['50%', '50%'],
                data: echartData,
                hoverAnimation: false,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14,47,64)',
                    borderWidth: 2
                  }
                },
              labelLine: {
                normal: {
                  length: 10,
                  length2: 50,
                  lineStyle: {
                    color: '#4c6487'
                  }
                }
              },
              label: {
                normal: {
                  formatter: params => {
                    console.log(params);
                    return (
                      '{value1|' + params.data.value1 + '%}\n{value|' +
                      formatNumber(params.value) + '}'
                    );
                  },
                  padding: [0 , -50, 25, -50],
                  rich: {
                    icon: {
                      fontSize: 16
                    },
                    value1: {
                      fontSize: 12,
                      padding: [0, 10, 0, 4],
                      color: '#ffc100'
                    },
                    value: {
                      fontSize: 12,
                      color: '#ffffff'
                    }
                  }
                }
              },
            }]
          }
        )
      }
    }
  }
</script>

<style scoped>

</style>
